<template>
  <div class="setting-box">
    <!-- 卡片盒子 -->
    <el-card>
      <!-- tabs盒子 -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="角色管理" name="first">
          <div class="box">
            <!-- 新增角色按钮 -->
            <el-button size="mini" type="primary" @click="addRole">
              <i class="el-icon-circle-plus"></i>新增角色
            </el-button>
            <!-- 表格 -->
            <el-table :data="list" class="mytable">
              <el-table-column
                label="序号"
                type="index"
                width="180"
              ></el-table-column>
              <el-table-column
                label="角色名"
                width="180"
                prop="name"
              ></el-table-column>
              <el-table-column
                label="描述"
                width="600"
                prop="description"
              ></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="{ row }">
                  <el-button type="text" @click="toSetrole(row)"
                    >分配权限</el-button
                  >
                  <el-button type="text" @click="editRole(row)">修改</el-button>
                  <el-button type="text" @click="delRole(row.id)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页导航 -->
            <el-pagination
              class="pagination"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentpage"
              :page-sizes="pagesizes"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">
          <div class="company">
            <span>
              <i class="el-icon-info"></i>
              对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改！</span
            >
          </div>
          <div class="myform">
            <div style="margin: 20px;"></div>
            <el-form label-position="right" label-width="100px">
              <el-form-item label="公司名称">
                <el-input
                  placeholder="江苏传智播客教育科技股份有限公司"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input
                  placeholder="北京市昌平区建材城西路金燕龙办公楼一层"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="公司邮箱">
                <el-input placeholder="bd@itcastcn" disabled></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  placeholder="传智播客官网-好口碑IT培训机构，不一样的品质"
                  disabled
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 弹出的面板  新增/修改 -->
    <el-dialog :title="title" :visible="dilalogShow" @close="cancel">
      <el-form :model="form" label-width="100px">
        <el-form-item label="角色名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="form.description"></el-input>
        </el-form-item>
      </el-form>
      <!-- 确定 和 取消 按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="editUser">确 定</el-button>
      </div>
    </el-dialog>
    <setrole
      ref="myrole"
      :showRole.sync="showRole"
      :username="username"
    ></setrole>
  </div>
</template>

<script>
//导入获取角色列表接口
import {
  getRoleList,
  editRoleList,
  delRoleList,
  addRoleList
} from '@/api/setting'
export default {
  data () {
    return {
      //当前被选中的tabs
      activeName: 'first',
      //表格的数据源
      list: [],
      //当前页
      currentpage: 1,
      //页面容量的集合
      pagesizes: [1, 5, 7, 10],
      //页容量
      pagesize: 5,
      //总条数据
      total: 0,
      //控制面板的显示与隐藏
      dilalogShow: false,
      title: '',
      form: {
        name: '', //角色名称
        description: '' //角色描述
      },
      //控制分配角色的面板显示与隐藏
      showRole: false,
      //分配角色的用户名
      username: '',
      
    }
  },
  methods: {
    //点击分配权限按钮
    toSetrole (row) {
      //打开面板
      this.showRole = true
      //控制角色名
      this.username = row.name
        //获取到角色详情数据
        this.$refs.myrole.getRoleDetail(row.id)
    },

    //点击删除按钮触发的事件
    async delRole (id) {
      try {
        //（1）询问用户是否删除当前角色
        await this.$confirm('您确定要删除当前角色信息吗', '温馨提示')
        //(2)将要删除的角色信息提交到服务器
        await delRoleList(id)
        //(2.1)判断当前删除的数据是否是当前页的最后一条，如果是就之间跳转到第一页
        if (this.list.length == 1) {
          this.currentpage = 1
        }
        //(3)提示用户删除成功
        this.$message.success('删除角色成功')
        //(4)重新加载数据
        this.getRole()
      } catch {
        console.log('出错了' && '操作失败')
      }
    },
    //点击新增角色按钮触发的事件
    addRole () {
      //将标题修改成新增角色
      this.title = '新增角色'
      this.dilalogShow = true
    },
    //点击确定按钮触发的事件
    async editUser () {
      //判断当前操作是新增还是编辑
      if (this.form.id) {
        //存在就是编辑
        //(1)提交数据到服务器修改数据
        await editRoleList(this.form)
        //(2)重新获取数据
        this.getRole()
        //(3)提示操作成功
        this.$message.success(this.form.id ? '编辑成功' : '新增成功')
        //(4)关闭面板
        this.dilalogShow = false
      } else {
        //不存在即新增
        //(1)发送请求到后台
        await addRoleList(this.form)
        //(2)重新加载数据
        this.getRole()
        //(3)提示成功
        this.$message.success('新增角色成功')
        //(3)清除输入框中的数据
        this.form = {
          name: '',
          description: ''
        }
        //(4)关闭面板
        this.dilalogShow = false
      }
    },
    //点击取消按钮触发的事件
    cancel () {
      //先清除输入框中的数据
      this.form = {
        name: '',
        description: ''
      }
      //再关闭面板
      this.dilalogShow = false
    },
    //点击修改按钮触发 的事件
    editRole (row) {
      //将标题修改成编辑角色
      this.title = '编辑角色'
      //弹出修改面板
      this.dilalogShow = true
      //将数据渲染到修改面板中
      this.form = { ...row }
    },

    //当页码容量发生改变时触发的事件
    handleSizeChange (size) {
      //修改页码容量
      this.pagesize = size
      //重新发送请求，加载页面
      this.getRole()
    },
    //当选中的当前页发生改变时触发的事件
    handleCurrentChange (page) {
      //修改当前页
      this.currentpage = page
      //重新发送请求，加载页面
      this.getRole()
    },
    //封装一个方法，用来获取所有角色列表
    async getRole () {
      const res = await getRoleList({
        page: this.currentpage,
        pagesize: this.pagesize
      })
      // console.log(res);
      this.list = res.data.rows
      //绑定总条数据
      this.total = res.data.total
    }
  },
  created () {
    //页面一加载就需要加载所有角色数据
    this.getRole()
  },
  components: {
    setrole: () => import('@/views/setting/components/setrole.vue')
  }
}
</script>

<style lang="scss">
.setting-box {
  padding: 25px 15px;
  .box {
    margin: 40px 20px;
  }
  .mytable {
    border: 5px dashed pink;
  }
  .company {
    height: 30px;
    background-color: #f4f4f5;
    padding-left: 35px;
    line-height: 30px;
    color: #91949c;
  }
  .myform {
    width: 600px;
    margin-top: 40px;
    font-size: 12px;
  }
}
</style>
